<!doctype html>
<html lang="en">
<style>
    :root {
        box-sizing: border-box;
    }

    *,
    ::before,
    ::after {
        box-sizing: inherit;
    }

    body {
        background-color: #eee;
        font-family: Helvetica, Arial, sans-serif;
    }

    body * + * {
        margin-top: 1.5em;
    }

    .container {
        max-width: 1080px;
        margin: 0 auto;
    }

    header {
        background-color: #0072b0;
        padding: 1.5em;
        border-radius: 1em;
    }
    .main {
        background-color: #fff;
        border-radius: 1.5em;
    }

    .row {

    }

    [class*="column-"] {
        float: left;
        margin-top: 0;
    }

    .clearfix {
        display: table;
    }
    .clearfix::before,
    .clearfix::after {
        display: table;
        content: " ";
    }

    .clearfix::after {
        clear: both;
    }

    .column-6 {
        width: 50%;
    }

    .media:nth-child(odd) {
        clear: left;
    }

    .media {
        float: left;
        background-color: #eee;
        border-radius: 1em;
    }

</style>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>grid-02</title>
</head>
<body>
    <div class="container">
        <header>
            <h1>Franklin Running Club</h1>
        </header>
        <main class="main clearfix">
            <h2>Running tips</h2>

            <div class="row">
               <div class="column-6">
                   <div class="media">
                       <img class="media-image" src="runner.png" width="80">
                       <div class="media-body">
                           <h4>Strength</h4>
                           <p>
                               Strength training is an important part of
                               injury prevention. Focus on your core&mdash;
                               especially your abs and glutes.
                           </p>
                       </div>
                   </div>
               </div>
                <div class="column-6">
                    <div class="media">
                        <img class="media-image" src="shoes.png" width="80">
                        <div class="media-body">
                            <h4>Cadence</h4>
                            <p>
                                Check your stride turnover. The most efficient
                                runners take about 180 steps per minute.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="column-6">
                    <div class="media">
                        <img class="media-image" src="shoes.png" width="80">
                        <div class="media-body">
                            <h4>Change it up</h4>
                            <p>
                                Don't run the same every time you hit the
                                road. Vary your pace, and vary the distance
                                of your runs.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="column-6">
                    <div class="media">
                        <img class="media-image" src="runner.png" width="80">
                        <div class="media-body">
                            <h4>Focus on form</h4>
                            <p>
                                Run tall but relaxed. Your feet should hit
                                the ground beneath your hips, not out in
                                front of you.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</body>
</html>
